<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>width</title>

    <script src="../../js/jquery-latest.js"></script>
</head>
<body>

<h1>Width</h1>
<div class="width"><span>test for width</span></div>


<h1>Height</h1>
<table>
    <tr>
        <td>test for height</td>
        <td>test for height</td>
    </tr>
    <tr>
        <td>test for height</td>
        <td>test for height</td>
    </tr>
</table>

<style type="text/css">
    *.width{
        width: 100%;
        background-color: greenyellow;
    }

    *.width span{
    }

    table{
        background-color: green;
        height: 100%;
        float: left;
        border: 2px solid darkolivegreen;
    }

    table td{
        height: 100%;
    }
</style>

<h1>拉伸</h1>

<div class="gp">定位的祖先元素
    <div class="parent">没有定位的父元素
        <span id="inline" class="s">不能拉伸静态元素</span>
        <div id="sized"></div>
        <div id="block" class="s">水平拉伸静态块状元素</div>
        <table id="table" class="s"><tr><td>水平拉伸表格</td></tr></table>
        <div id="abs-v" class="s">垂直拉伸绝对定位元素</div>
        <span id="abs-h" class="s">水平拉伸绝对定位元素</span>
        <span id="float" class="s">近乎拉伸绝对定位元素</span>
    </div>
</div>

<style>
    *.gp .s{
        border-top: 5px solid gray;
        border-right: 5px solid black;
        border-bottom: 5px solid black;
        border-left: 5px solid gray;
        background-color: gold;
    }

    #block{
        width:auto;
    }
    #table{
        width: 100%;
    }
    #abs-v{
        height: auto;right:0;top: 0;bottom: 0;position: absolute;
    }
    #abs-h{
        height: auto;left: 0;right: 0;position: absolute;
    }
    #float{
        width: 100%;float: left;
    }
</style>

</body>
</html>